<template>
	<div class="">
		<div class="topTitle">讲师管理</div>
		<el-form :model="query" label-width="80px" inline>
			<el-form-item label="讲师姓名">
				<el-input v-model="query.name" placeholder="请输入讲师姓名"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="handleSearch">查询</el-button>
				<el-button @click="handleRefresh">重置</el-button>
			</el-form-item>
		</el-form>
		<!-- 表格盒子 -->
		<el-button type="primary" @click="addClass({})">新建</el-button>
		<el-table :data="tableData" style="margin-top: 20px;" border>
			<el-table-column type="index" label="序号" align="center">
			</el-table-column>
			<el-table-column label="讲师头像姓名" align="center">
				<template slot-scope="{row}">
					<div class="row-me row-center">
						<el-image v-if="row.icon" class="width50 width50 margin-right10" :src="row.icon"
							:preview-src-list="[row.icon]" fit="fill"></el-image>
						<div style="text-align: left;">
							<span>{{row.name}}</span>
							<div class="margin-top5">{{row.phone}}</div>
						</div>
					</div>
				</template>
			</el-table-column>
			<el-table-column label="一句话简介" align="center" prop="summary">
			</el-table-column>
			<el-table-column label="讲师描述" align="center" prop="content">
			</el-table-column>
			<el-table-column label="创建时间" align="center" prop="createTime">
			</el-table-column>
			<el-table-column label="操作" align="center">
				<template slot-scope="scope">
					<el-button type="text" size="small" @click="addClass(scope.row)">编辑</el-button>
					<el-button type="text" size="small" @click="handleDel(scope.row.id)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页 -->
		<div class="margin-top">
			<el-pagination background layout="->,total,sizes, prev, pager, next" :page-sizes="[30, 40, 50, 60]"
				@size-change="handleSizeChange" :current-page="query.pageNo" :total="pageTotal"
				@current-change="handlePageChange">
			</el-pagination>
		</div>

		<!-- 新建弹框 -->
		<el-dialog :title="title" :visible.sync="dialogVisibleAdd" width="30%" class="dragAdd">
			<el-form ref="form" :model="form" :rules="rules" label-width="100px">
				<el-form-item label="讲师姓名" prop="name">
					<el-input v-model="form.name" placeholder="请输入讲师姓名"></el-input>
				</el-form-item>
				<el-form-item label="联系电话" prop="phone">
					<el-input v-model="form.phone" placeholder="请输入讲师姓名"></el-input>
				</el-form-item>
				<el-form-item label="上传头像" required>
					<div class="row-me row-center">
						<el-image v-if="form.icon" class="width100 height100 radius6 margin-right10" :src="form.icon"
							:preview-src-list="[form.icon]" fit="scale-down"></el-image>
						<el-button @click="clickImg" type="text">上传头像</el-button>
					</div>
				</el-form-item>
				<el-form-item label="一句话简介" prop="summary">
					<el-input v-model="form.summary" placeholder="请输入简介"></el-input>
				</el-form-item>
				<el-form-item label="讲师描述" prop="content">
					<el-input type="textarea" v-model="form.content" placeholder="可输入描述内容"></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisibleAdd = false">取 消</el-button>
				<el-button type="primary" @click="submitForm">确 定</el-button>
			</span>
		</el-dialog>

		<imgLibrary ref="imgLibrary" @handleImgOk="handleImgOk"></imgLibrary>
	</div>
</template>

<script>
	import imgLibrary from "@/components/imgLibrary"
	export default {
		components: {
			imgLibrary
		},
		name: 'commodityClass',
		data() {
			return {
				uploadUrl: this.$host + '/admin/oss/uploadImage?token=' + localStorage.getItem('htk_token'),
				dialogVisibleAdd: false,
				dialogVisible: false,
				form: {
					name: '',
					desc: '',
					summary: '',
					icon: '',
					content: '',
				},
				tableData: [],
				titleImages: '',
				title: '',
				query: {
					pageNo: 1,
					pageSize: 30
				},
				pageTotal: 0,
				fileList: [],
				rules: {
					name: {
						required: true,
						message: '请输入讲师',
						trigger: 'blur'
					},
					phone: {
						required: true,
						message: '请输入联系电话',
						trigger: 'blur'
					},
					icon: {
						required: true,
						message: '请上传头像',
						trigger: 'change'
					},
					summary: {
						required: true,
						message: '请输入简介',
						trigger: 'blur'
					},
					content: {
						required: true,
						message: '请输入讲师描述',
						trigger: 'blur'
					},
				},
				oldImages: [],
				oldImageTotal: 0,
				oldImageVisible: false,
				imageQuery: {
					pageNo: 1,
					pageSize: 32
				}
			}

		},
		created() {
			this.getData()
		},
		methods: {
			handleImgOk(data) {
				this.$set(this.form, 'icon', data)
			},
			//点击图片库
			clickImg() {
				this.$refs.imgLibrary.show()
			},
			async handleDel(id) {
				const res = await this.$postForm('/admin/mall/deleteTeacher', {
					id
				})
				this.$message.success('删除成功')
				this.getData()
			},
			handlePictureCardPreview(res) {
				this.dialogVisible = true;
			},
			handlePageChange(val) {
				this.$set(this.query, 'pageNo', val);
				this.getData();
			},
			handleSizeChange(val) {
				this.$set(this.query, 'pageSize', val);
				this.getData();
			},
			handleSearch() {
				this.query.pageNo = 1
				this.getData();
			},
			handleRefresh() {
				this.query = {
					pageNo: 1,
					pageSize: 30
				}
				this.getData();
			},
			// 讲师管理tab数据
			async getData() {
				const res = await this.$get('/admin/mall/pageQueryTeacher', this.query)
				this.tableData = res.data.list
				this.pageTotal = res.data.totalRow
			},
			// 讲师新建
			submitForm() {
				this.$refs['form'].validate(async (valid) => {
					if (valid) {
						const res = await this.$post('/admin/mall/addTeacher', this.form)
						this.getData()
						this.dialogVisibleAdd = false
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			addClass(row) {
				if (row.id) {
					this.title = '编辑讲师'
					this.form = JSON.parse(JSON.stringify(row))
					this.fileList = [{
						name: '',
						url: this.form.icon
					}]
				} else {
					this.title = '新建讲师'
					this.form = {}
					this.fileList = []
				}
				this.dialogVisibleAdd = true

			},
		}
	}
</script>

<style scoped="scoped">
	.el-upload {
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.el-upload:hover {
		border-color: #409EFF;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 100px;
		height: 100px;
		line-height: 100px;
		text-align: center;
	}

	.avatar {
		width: 100px;
		height: 100px;
		display: block;
	}

	/* 	.tabBox {
		width: 95%;
		margin-left: 20px;
	} */

	.iptBox ::v-deep .el-input__inner {
		width: 400px;
	}

	::v-deep .el-textarea__inner {
		width: 400px;
	}

	.fenye {
		margin-left: 1100px;
		margin-top: 50px;
	}

	.dragAdd ::v-deep .el-input__inner {
		width: 400px;
	}
</style>